<template>
	<!-- 找工作-顶部搜索框和定位 -->
  <view :class="layerHidden ? 'layer-hidden' : ''" class="mycont">
    <view class="example-body">
      <view class="searchs">
        <view class="left">
			
          <!-- <view class="selects">
            <u-icon class="map" name="map"></u-icon>
            <pickerAddress
              ref="addr"
			   @fnscroll="fnscroll"
              @fnpickerAddress="fnpickerAddress"
              class="inp"
            ></pickerAddress>
            <u-icon color="#efefef" class="icons" name="arrow-down"></u-icon>
          </view> -->
      
          <u-search
          
            class="search"
            bg-color="#F7F8FA"
            placeholder="百万职位 劳动力信息系统"
            shape="square"
            disabled=""
            :show-action="true"
            action-text="搜索"
            :animation="true"
          >
          </u-search>
        </view>
		
        <view class="right" >
          <view v-if="cirleShow" class="circle"></view>
          <image
            class="bell"
            src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/home/xiaoxi.png"
            mode="widthFix"
          ></image>
        </view>
		
		
      </view>
      <view class="warpBox">
        <view class="wrap">
          <u-swiper
            height="300"
            img-mode="aspectFill"
            class="swiper"
            :list="list1"
          ></u-swiper>
        </view>
      </view>
	  <!-- 宫格 -->
      <navlist></navlist>

      <!-- #ifdef H5 -->

      <view class="container">
        <!-- <u-sticky :offset-top="0" :enable="enable">
 
          <view class="sticky">
            <view class="tabs">
              <u-tabs
                class="main"
                :item-width="10"
                :list="tablist"
                :is-scroll="false"
                :current="current"
                @change="changeTab"
              ></u-tabs>
              <view class="black"></view>
            </view>
          </view>
        </u-sticky> -->
        <!-- <myitem v-if="list.length" :list="list" />
        <u-empty class="empty" v-else text="暂无数据" mode="list"></u-empty> -->
      </view>
      <!-- #endif -->

      <!-- #ifdef MP-WEIXIN -->

      <view class="container">
       <!-- <u-sticky :offset-top="100" :enable="enable">
          只能有一个根元素
          <view class="sticky">
            <view class="tabs">
              <u-tabs
                class="main"
                :item-width="10"
                :list="tablist"
                :is-scroll="false"
                :current="current"
                @change="changeTab"
              ></u-tabs>
              <view class="black"></view>
            </view>
          </view>
        </u-sticky> -->
       <!-- <myitem v-if="list.length" :list="list" />
        <u-empty class="empty" v-else text="暂无数据" mode="list"></u-empty>
		
        <u-loadmore
          v-if="list.length != 0"
          :status="status"
          @loadmore="loadmore"
        ></u-loadmore> -->
      </view>
      <!-- #endif -->
    </view>
	
  </view>
</template>

<script>
import pickerAddress from "@/components/citys/pickerAddress.vue";
import navlist from "./navList.vue";
import myitem from "../../components/list/index.vue";
import api from "../../api/routes.js";
import { mapGetters, mapMutations } from "vuex";

export default {
  components: {
    pickerAddress,
    navlist,
    myitem,
  },
  computed: {
    ...mapGetters(["citiesInfor", "searchPage"]),
  },
  data() {
    return {
      layerHidden: false,
      cirleShow: true,
      enable: true,
      tablist: [
          {
          name: "本地工作",
        },
        {
          name: "工厂直招",
        },
        {
          name: "工厂主推",
        },
      
      ],
      current: 0,
      page: 1,
      limit: 10,
      cityArr: [],
      orderSort:3,
      tabName:'local',
      status: "loadmore",
      list: [],
      // 拿到的数据总条数
      total: 0,
      //判断是否发送请求的条件
      load: false,
      workType: "",
      list1: [],
    };
  },
  // 在对应的show和hide页面生命周期中打开或关闭监听
  onShow() {
	  // 删除本地存储对应内容
    uni.removeStorageSync('city1')
    this.enable = true;
    if (this.$store.state.searchPage) {
		
		console.log(33333333333)
    } else {
		
		console.log(7777777777777)
      const value = uni.getStorageSync("city");
      // console.log(value,333333,this.$store.state.city);
      if (value) {
        let val = this.$store.state.city?this.$store.state.city:'全国'
        if (value != val) {
          this.list = [];
          this.page = 1;
          this.getList();
        }
      } else {
        this.list = [];
        this.page = 1;
        this.getList();
      }
    }
    this.setsiteRecruitmentPage(0);
    this.setfindWorkersPage(0);
  },
  onHide() {
    this.enable = false;

    // uni.removeStorageSync('city')
  },
  onLoad() {
	  
	  
	  
    this.getBanner();
	// 进入首页获取当前位置
	// if(wx.getStorageSync('nowLgt')=='' && wx.getStorageSync('nowLat')==''){
	// 	wx.getLocation({
	// 	 type: 'wgs84',
	// 	 success (res) {
	// 		 wx.setStorageSync("nowLat",res.latitude);
	// 		 wx.setStorageSync("nowLgt",res.longitude);
	// 		 },
	// 		 fail() {
	// 		 	console.log('未拿到经纬度！！');
	// 			uni.showModal({
	// 				title: '提示',
	// 				content: '未拿到经纬度，请打开定位服务功能',
					
	// 			})
	// 		 }
	// 	})
	// }else{
	// 	return
	// }
	
	
  },
  //下拉
  // 页面到底部的生命周期，每次页面抵达底部都会触发
  onReachBottom() {
	  console.log(this.status ,88888888)
    //页面抵达底部后，如果此时的status状态是加载更多，那就调用loadmore方法
    if (this.status == "loadmore") {
      this.loadmore();
    }
  },
  onShow(){
	this.getMapLocation()  
  },

  methods: {
    ...mapMutations(["setsiteRecruitmentPage", "setfindWorkersPage"]),
	
	getMapLocation(){
		wx.getLocation({
		 type: 'wgs84',
		 success (res) {
			 wx.setStorageSync("nowLat",res.latitude);
			 wx.setStorageSync("nowLgt",res.longitude);
			 },
			 fail() {
			 	console.log('未拿到经纬度！！');
				uni.showModal({
					title: '提示',
					content: '为了更好的给您推附近岗位，请打开您的手机定位功能',
					
				})
			 }
		})
		
	},
    fnpickerAddress(val) {
		// uni.pageScrollTo()是页面级滚动（整个页面滚动），不是页面内某个区域滚动，
		// uni.showTabBar() 显示 tabBar , uni.hideTabBar() 隐藏 tabBar
		// val中是控制地图选择框的布尔值
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 50,
      });
      this.list = [];
      this.page = 1;
      val.status ? uni.hideTabBar() : uni.showTabBar();
      this.layerHidden = val.status;
      if (val.loadDate) {
        this.getList();
      }
	  console.log(val,'??+++');
    },
	// 控制选择框的false or true
	fnscroll(e){
		this.layerHidden = !e;
	  console.log(e,4444444444444);
	},
    // 获取省市区列表数据
    async getBanner() {
      const res = await this.$myRequest({
        url: api.bannerList,
        method: "GET",
        data: {},
      });
      this.list1 = res.data.list.map((i) => {
        return {
          image: i.banner_url,
        };
      });
    },
    async getList() {
      // 判断当前是否在请求，如果为true正在请求数据，就让他返回空，如果为false没在请求，就让它开始请求数据
      if (this.load) {
        return;
      }
      this.load = true;
      // 请求数据时，状态改为加载中状态
      this.status = "loading";
      const res = await this.$myRequest({
        url: api.pageJobList,
        method: "POST",
        data: {
          page: this.page,
          limit: this.limit,
          key: this.keyword, //搜索关键词
          classify: this.classify, //分类(hours:小时工,stu:学生专区,factory:工厂,local:本地工作,build:建筑招工,fitup:装修energy:能源,other:其他)
          type: "1", //1:找工作模块 2:工地招工
          orderSort: this.orderSort, //1:热门,2:最新,3:推荐，热门
          tabName:this.tabName,
          province: this.citiesInfor[0], //省
          city: this.citiesInfor[1], //市
          district: this.citiesInfor[2], //区
          workType: this.workType, //工种ID
        },
      });
      // 请求完以后，将load改为false，方便下一次发送请求
      this.load = false;
      // 判断获取的数据是否正确，当res.code=0时，数据正确
      if (res.data.code !== 0) {
        // 当获取到的数据不正确时，给用户错误提示信息
        return uni.showToast({
          title: res.msg,
          icon: "none",
        });
        //并将状态码改为nomore，没有更多了
        this.status = "nomore";
      }

      // 如果从接口中获取到的数据是正确的，获取到数据的总条数
      this.total = res.data.page.totalCount;
      // 将获取到的数据给数据列表，此处是解构，不适合用push
      this.list = [...this.list, ...res.data.page.list];
	  console.log(this.list,'本地岗位！');
      // 调用ismore方法 ，判断时候还有数据
      this.ismore();
    },
    // 判断是否还有更多数据
    ismore() {
	
      console.warn(this.total, "====", this.list.length);
      // 判断当数据总数等于数据列表的长度时，此时已经获取到全部数据，没有更多了，将加载状态改为nomore
      if (this.total === this.list.length) {
        this.status = "nomore";
        // 否则，将状态改为loadmore，仍然还有数据
      } else {
        this.status = "loadmore";
      }
    },
    // 加载下一页的数据
    loadmore() {
      // 每次出发该方法，都要使页数加一
      this.page++;
      // 页数加一后，在调用getList方法，获取下一页的数据
      this.getList();
    },
    // 点击搜索框调整comSearch页面
    goSearch() {
      uni.navigateTo({
        url: "/package/pages/searchJob/comSearch/comSearch",
      });
    },

    changeTab(index) {
      this.current = index;
      if (index == 1) {
        this.orderSort = 3;
        this.tabName = 'factory'

      } else if (index == 0) {
        this.orderSort = 1;
        this.tabName = 'local'
        
      } else {
        this.orderSort = 2;
        this.tabName = 'hot'
      }

      uni.pageScrollTo({
        scrollTop: 0,
        duration: 50,
      });
      this.list = [];
      this.page = 1;
      this.getList();
    },
    scan() {
      this.cirleShow = false;
      uni.navigateTo({
        url: "/package/pages/searchJob/notice",
      });
    },
  },
};
</script>


<style>
	page{
		background: #fff !important;
	}
</style>
<style lang="scss" scoped>



.empty {
  display: block;
  margin: 80px auto 0;
  text-align: center;
}
/deep/ .u-badge {
  z-index: 0;
}

.layer-hidden {
  height: 100vh;
  overflow: hidden;
}

.container {
  // height: 120vh;
}

.search {
  flex: 1;
}

.sticky {
  width: 750rpx;
  color: #fff;
  background: #ffffff;
}

.tabs {
  width: 100%;
  display: flex;

  .main {
    flex: 1;
  }

  .black {
    width: 250rpx;
  }
}

.warpBox {
  width: 100%;
  background: #ffffff;
  margin-top: 100rpx;
}

.wrap {
  background: #ffffff;
  margin-left: 4%;
  margin-right: 4%;
}

.searchs {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  height: 100rpx;
  top: 0;
  z-index: 1;
  padding: 20rpx 0 20rpx 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    position: relative;
    // background: #ffffff;
    flex: 1;
    margin-right: 20rpx;
    margin-left: 20rpx;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    // .line {
    // 	color: #f2f2f2;
    // 	margin: 0 0 0 15rpx;
    // }
    font-size: 13px;

    /deep/.uni-input-input {
      font-size: 10px;
    }

    .selects {
      width: 140rpx;
      margin-right: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;

      .map {
        font-size: 18px;
        color: #d9d9d9;
      }

      .inp {
        width: 90rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .right {
    position: relative;
    width: 25px;
    margin-right: 10rpx;
    color: #333;

    .bell {
      width: 20px;
      height: 20px;
    }

    .circle {
      width: 14rpx;
      height: 14rpx;
      background: #ff0000;
      position: absolute;
      border-radius: 50%;
      z-index: 9;
      right: 4px;
      top: -1px;
    }
  }
}
</style>
